<template>
	<view class="page">
		<view class="banner">
			<image src="@/static/login/banner.png" />
		</view>
		<view class="con">
			<view class="opt opt1">
				<view class="opt-con">
					<text class="label">Phone Number</text>
					<input type="tel" v-model.trim="phoneNumber" placeholder="Your phone number" />
				</view>
			</view>
			
			<view class="opt opt2">
				<view class="opt-con">
					<text class="label">SMS Code</text>
					<input type="text" v-model.trim="smsCode" maxlength="6" placeholder="SMS code" />
					<text :class="{'con-a': n != 120}" class="code" v-text="smsCodetext" @click="getSmsCode" />
				</view>
			</view>
			
			<view class="check" :class="{'con-p': checked}" @click="tapAgree">I have read and agree<text @click="tapPri" class="policy">Privacy Policy</text></view>
			<text class="sub" @click="sub">Login</text>
			<view class="not-login" @click="isService = true">I can't login</view>
			<text class="con-span">
				{{contactInfo.cn}}<br />
				Registration NO:{{contactInfo.crn}}<br />
				Certificate of Authority NO{{contactInfo.cmn}}
			</text>
		</view>
		<service v-show="isService" ref="service" @close='isService = false'></service>
	</view>
</template>

<script>
	import service from "@/components/service";
	import {getImgCode,login,autoLogin,getXym} from "@/api/common.js"
	export default {
		data() {
			return {
				phoneNumber: '',
				smsCode: '',
				n: 120,
				smsCodetext: 'Get code',
				checked: false,
				registerSource: "",
				system: "",
				phoneBrand: "",
				userAgent:"",
				isService:false,
				canLogin: false,
				registerChannel: 'APP',
				contactInfo:{}
			}
		},
		metaInfo: {
			title: 'insta'
		},
		components: {
			service,
		},
		onLoad() {
			uni.removeStorageSync("moneyAmount");
			uni.removeStorageSync("exchangeId");
			uni.removeStorageSync("source");
			let systemInfo = uni.getSystemInfoSync();
			this.system = systemInfo.system;
			this.registerSource = systemInfo.deviceType;
			this.phoneBrand = systemInfo.deviceBrand || systemInfo.deviceModel;
			this.userAgent = systemInfo.ua
			let cToken = uni.getStorageSync("cToken");
			const cTime = uni.getStorageSync('cTime');
			const preLoginTime = cTime && new Date(cTime).toDateString(); //前一次自动登录时间
			const curLoginTime = new Date().toDateString();
			if (cToken) {
				if(!preLoginTime || preLoginTime !== curLoginTime){//判断是否同一天
					this.autoLogin()
				}
			}
			this.getContactInfo()
		},
		
		methods: {
			//获取验证码
			getSmsCode() {
				var self = this;
				var regNumber = /\d+/;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (regNumber.test(self.smsCodetext)) {
					return
				}
				var time = setInterval(function() {
					self.n--;
					self.smsCodetext = self.n + 's';
					if (self.n == 0) {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				}, 1000);
				const params = {
					phoneNumber: self.phoneNumber,
					registerSource: self.registerSource
				}
				getImgCode(params).then(res => {
					self.UTILS.logStr(res.message);
					if (res.code != '0000') {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				})
			},

			// 登录注册
			sub() {
				var self = this;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (!self.smsCode) {
					self.UTILS.logStr('Please enter SMS code');
					return;
				}
				// if (!self.checked) {
				// 	self.UTILS.logStr('Please read and tick the Privacy Policy.');
				// 	return;
				// }
				self.login();
			},

			//登录
			login() {
				var self = this;
				uni.removeStorageSync("cToken");
				const params = {
					phoneNumber: self.phoneNumber,
					vcode: self.smsCode,
					registerChannel: self.registerChannel,
					registerSource: self.registerSource,
					system: self.system,
					phoneBrand: self.phoneBrand,
					userAgent:self.userAgent,
					deviceId: uni.getStorageSync("deviceId")
				}
				login(params).then(res => {
					if (res.code == '0000') {
						uni.setStorageSync('cTime', new Date());
						uni.setStorageSync('cToken', res.data);
						uni.removeStorageSync('canLogin');
						uni.reLaunch({
							url:'/pages/home/index',
							animationType: 'pop-in',
							animationDuration: 200
						})
					} else {
						self.UTILS.logStr(res.message);
					}
				})
			},

			// 自动登录
			autoLogin() {
				var self = this;
				const params = {
					deviceId: uni.getStorageSync("deviceId")
				}
				autoLogin(params).then(res => {
					if (res.code == '0000') {
						if(res.data){
							uni.setStorageSync('cToken', res.data)
							uni.setStorageSync('cTime', new Date());
							uni.removeStorageSync('canLogin')
							uni.reLaunch({
								url:'/pages/home/index',
								animationType: 'pop-in',
								animationDuration: 200
							})
						}
						else{
							uni.removeStorageSync('cToken');
							uni.removeStorageSync('cTime');
						}
					} else {
						uni.removeStorageSync('cToken');
						uni.removeStorageSync('cTime');
						self.UTILS.logStr(res.message);
					}
				})
			},
			
			//获取联系方式
			getContactInfo() {
				const webUrl = uni.getStorageSync('webUrl') || this.COFIG?.staticUrl;
				const params = {
					ym: webUrl,
					deviceId: uni.getStorageSync("deviceId")
				}
				getXym(params).then(res => {
					if (res.code == '0000') {
						this.contactInfo = res.data
					}
				})
			},

			//app点击阅读协议
			tapAgree(){
				var self = this;
				const canLogin = uni.getStorageSync("canLogin");
				if(canLogin){
					self.checked = !self.checked;
				}else{
					self.tapPri();
				}
			},
			
			//点击协议
			tapPri(){
				uni.navigateTo({
					url:'/pages/privacy/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: 100%;
		background-color: #FFF;
	}
	.banner{
		position: relative;
		image {
			width: 100%;
			display: block;
		}
	}
	.con {
		width: 86%;
		margin: 0 auto;
		.opt {
			height: 140rpx;
			padding-left: 80rpx;
			input { 
				width: 400rpx;
				height: 90rpx;
				padding-left: 30rpx; 
				font-size: 28rpx; 
				color: #040507; 
				border: none; 
				background: none;
			}
			.opt-con{
				display: flex;
				height: 140rpx; 
				padding-top: 27rpx; 
				border: 4rpx solid #000; 
				border-radius: 8rpx; 
				position: relative;
				
				.label{ height: 50rpx; line-height: 50rpx; padding: 0 20rpx; font-size: 26rpx; color: #222; background-color: #fffafa; border-radius: 4rpx; position: absolute; top: -26rpx; left: 20rpx;}
				.code { width: 140rpx; height: 70rpx; line-height: 70rpx; text-align: center; font-size: 24rpx; color: #FFF; background-color: #3E778A; border-radius: 8rpx; float: right; margin: 15rpx 18rpx 0 0;}
				.con-a {
					background-color: #d2d2d2;
				}
			}
		}
		
		.opt1{
			background: url('@/static/login/icon1.png') no-repeat left center;
			background-size: 42rpx auto;
		}
		
		.opt2{
			background: url('@/static/login/icon2.png') no-repeat left center;
			background-size: 50rpx auto;
			margin-top: 80rpx;
		}
		.check {
			height: 88rpx;
			line-height: 88rpx;
			padding-left: 58rpx;
			font-size: 28rpx;
			color: #000;
			background: url("@/static/login/check.png") no-repeat left center;
			background-size: 35rpx 35rpx;
			.policy{
				margin-left: 20rpx;
				color: #168de4;
			}
		}
		.con-p {
			background: url("@/static/login/checked.png") no-repeat left center;
			background-size: 35rpx 35rpx;
		}
		.con-span{
			line-height: 38rpx;
			text-align: center;
			font-size: 26rpx;
			color: #6F6F6F;
			display: block;
			margin: 80rpx auto 30rpx auto;
		}
	}
	.sub {
		width: 294rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFF;
		background-color: #0FF0F0;
		border-radius: 50rpx;
		display: block;
		margin: 50rpx auto 0 auto;
	}
	.not-login{
		text-align: center;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.privacy{ width: 100%; height: 100%; background-color: #FFF; position: fixed; top: 0; left: 0;}
	.pri-con{ height: calc(100% - 90rpx); overflow: auto;}
	.pri-btn{ height: 90rpx;}
	.pri-btn a{ width: 500rpx; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 30rpx; color: #FFF; background-color: #dedede; border-radius: 10rpx; display: block; margin: 15rpx auto 0 auto;}
	.pri-btn .pri-ba{ background-color: #6580FA;}
</style>
